<template>
    <div class="mine">
      <div class="header">
          <div class="pic"></div>
          <div class="iphone">
              <span>7a9aa5a077a</span>
              <span>130****9097</span>
          </div>
          <div class="btn">
              <button>账户设置</button>
          </div>
      </div>
      <div class="banner1">
          <img :src=pic alt="">
      </div>
      <div class="banner2">
          <div><h3>红包</h3></div>
          <div><h3>余额</h3></div>
      </div>
      <div class="banner3">
          <h3>常用工具</h3>
          <div class="my">
              <div>我的地址</div>
              <div>我的客服</div>
              <div>店铺关注</div>
              <div>评价有礼</div>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return {
              pic:"https:img2.baidu.com/it/u=999150412,884289425&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=320",
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
      .mine{
          background: #f5f5f5;
          overflow: hidden;
      }
      .header{
          margin-top: 50px;
          height: 100px;
          display: flex;
          justify-content: space-around;
          align-items: center;
      }
      .header .pic{
          margin: 10px;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: rgb(1,142,255);;
      }
      .header .iphone{
          display: flex;
          flex-direction: column;
      }
      .header .iphone span:nth-child(1){
          font-weight: bold;
          margin-bottom: 5px;
          font-size: 18px;
      }
      .header .iphone span:nth-child(2){
          font-size: 14px;
      }
      .header button{
          border-radius: 20px;
          border: 1px solid #999;
          padding:5px 10px;
      }
      .banner1{
          margin: 10px;
          height: 100px;
      }
      .banner1 img{
          height: 100px;
          width: 100%;
          border-radius: 20px;
      }
      .banner2{
          margin: 10px;
          height: 100px;
          border-radius: 20px;
          background: white;
          text-align: center;
          display: flex;
          justify-content: space-around;
          align-items: center;
      }
      .banner3{
          margin: 10px;
          height: 100px;
      }
      .banner3 h3{
          padding-left: 5px;
          line-height: 40px;
      }
      .banner3 .my{
          line-height: 60px;
          display: flex;
          justify-content: space-around;
          align-items: center;
      }
  
  </style>